import React, { useState } from 'react'
import "./TodoList.css"
//调用子组件
import TodoHeader from './TodoHeader/TodoHeader'
import TodoMain from './TodoMain/TodoMain'
import TodoFooter from './TodoFooter/TodoFooter'
export default function TodoList() {
    //初始化状态数据
    //初始化数组地址假设0x100
    let [todolists, setTodolists] = useState([
        {
            id: 1,
            title: "敲代码",
            done: true
        },
        {
            id: 2,
            title: "睡觉",
            done: false
        }
    ]);

    //在父组件中声明一个可以让子组件来有权限来修改父组件中的状态数据
    let addnewTodo = title => {
        //修改状态数据
        //初始化数组地址假设0x200
        setTodolists([
            ...todolists,
            {
                id: todolists.length + 1,
                title,
                done: false
            }
        ])
    }

    let checkOnetodo = (id, done) => {
        //由于状态数据中哪一条对象都有可能被修改值，那么我们可以遍历按照id条件做更改
        let newtodolists = todolists.map(item => {
            //判断
            if (item.id === id) {
                item.done = done;
            }
            return item;
        });
        console.log(newtodolists);
        setTodolists(newtodolists);
    }


    return (
        <div className="todo-container">
            <div className="todo-wrap">
                {/* 调用头部组件 */}
                <TodoHeader addnewTodo={addnewTodo}></TodoHeader>
                <TodoMain todolists={todolists} checkOnetodo={checkOnetodo} />
                <TodoFooter></TodoFooter>
            </div>
        </div>
    )
}
